<%@page import="config.Constants"%>
<script>
	// Columnas de la tabla producto
	var cols = new Array("id", "idStock", "codigo", "marca", "modelo", "medida",
					 "descripcion", "proveedor", "precioB2B", "precioLista");

	// document ready
	$(document).ready( function() {
		
		// event binding
		$('#refreshListButton').bind('click', reloadList);
		$('#agregarButton').bind('click', showModal);
		$('#agregarRecepcionButton').bind('click', showModalRecepcion);
		$('#importarProductoButton').bind('click', showModalImportar);
		$('#editButton').bind('click', getProducto);
		$('#button-import-producto').bind('click', importProducto);
		$('#button-save-producto').bind('click', saveProducto);
		$('#button-save-recepcion').bind('click', saveRecepcion);
		$('#deleteButton').bind('click', deleteProducto);
		$('#searchButton').bind('click', searchProducto);
		$('#remito-add-producto-button').bind('click', function() {
			$("#agregarProducto").modal('show');
		});
		
		// load grid data
		reloadList();
	});
	
	/**
	 * Abre la ventana modal de producto
	 */
	function showModal() {

		$("#agregarProducto").modal('show');

		$(':input', '#productoForm').not(':button, :submit, :reset')
		  							.val('')
		  							.removeAttr('checked')
		  							.removeAttr('selected');

		// init form
		$("#agregarProducto input").val('');
		
		// default stock values
		$('#stock_0_almacen').val('<%=Constants.ALMACEN_RODRIGUEZ%>');
		$('#stock_1_almacen').val('<%=Constants.ALMACEN_LUJAN%>');
	}
	
	/**
	 * Abre la ventana modal de recepcion de mercaderia
	 */
	function showModalRecepcion() {

		$("#agregarRecepcion").modal('show');

		$(':input', '#recepcionForm').not(':button, :submit, :reset')
		  							.val('')
		  							.removeAttr('checked')
		  							.removeAttr('selected');
	
		initRemito();
	}
	
	/**
	 * Abre la ventana modal de importacion de productos 
	 */
	function showModalImportar() {
		
		$("#importarProducto").modal('show');
	}
	
	/**
	 * Busca productos
	 */
	function searchProducto() {
		
		$.fn.getList('productos_buscar', 'listaProductos', 'productoSearchForm', cols);
	}
	 
	/**
	 * Guarda un producto
	 */
	function saveProducto() {
		
		// Verifica que no haya seleccionados almacenes repetidos
		var almacenes = $('.almacen-selector');
		for (var i=0; i<almacenes.length; i++){
			
			var almacen = almacenes[i];
			var count = 1;
			for (var j=0; j<almacenes.length; j++) {
				
				if (j!=i && almacen.value == almacenes[j].value) {
					count++;
				}
			}
			if (count > 1) {
				$('.modal-body').scrollTop(0);
				$.fn.setMessage("false", "No puede haber almacenes repetidos. Revisa tu seleccion");
				return false;
			}
		}
		
		$.fn.send('productos_agregar', 'productoForm', 'button-save-producto', null, reloadList, true, 'agregarProducto');
	}
	
	/**
	 * Guarda una recepcion de mercaderia
	 */
	function saveRecepcion() {
		$.fn.send('productos_recepcion', 'recepcionForm', 'button-save-recepcion', null, reloadList, true);
	}
	
	/**
	 * Importa masivamente productos
	 */
	function importProducto() {
		$.fn.send('productos_importar', 'importarProductoForm', 'button-import-producto', null, reloadList, true);
	}
	
	/**
	 * Borrar un producto
	 */
	function deleteProducto() {
		
		if (confirm("Realmente quieres eliminar este producto?")) {
			var value = ( $(":checked")[0]).value;
			$.fn.send('productos_borrar', null , null, 'id='+value , reloadList);
		}
	}
	
	/**
	 * Reload producto list
	 */
	function reloadList() {
		
		$.fn.getList('productos_getProductos', 'listaProductos', null, cols);
	}
	
	/**
	 * Edit productos
	 */
	function getProducto() {
		
		$("#agregarProducto").modal();
		
		// init form
		$("#agregarProducto input").val('');
		
		var value = ( $(":checked")[0]).value;
		$.fn.getById('productos_getProducto', value, fillStock);
	}
	
	function fillStock(entity) {
		var stocks = entity.stocks;
		for (var i=0; i<stocks.length; i++) {
			var stock = stocks[i];
			$('#stock_'+i+'_cantidad').val(stock.cantidad);
			$('#stock_'+i+'_almacen').val(stock.almacen);
		}
	}
	
	/**
	 * Agrega una linea de remito
	 */
	function agregarLineaRemito(num) {
		
		var prev = num-1;
		$('#agregar-icon-' + prev).remove();
		
		var html  = "<div class=\"row remito-linea\" id=\"lineaRemito" + num + "\" style=\"margin-bottom:5px\">";
 			html += "	<input type=\"text\" class=\"span1\" id=\"cantidad" + num + "\" name=\"remitoDTO.lineasRemito[" + num + "].cantidad\">";
			html += "	<select id=\"producto" + num + "\" name=\"remitoDTO.lineasRemito[" + num +"].idProducto\" class=\"span5\"></select>";
			html += "	<i class=\"icon-remove\" onclick=\"removerLineaRemito(" + num + ")\"></i>";
			html += "	<i style=\"margin-left:15px;\" class=\"icon-plus\" id=\"agregar-icon-" + num + "\" onclick=\"agregarLineaRemito(" + ++num + ")\"></i>";
			html += "</div>	";
			
		$('#remito-container').append(html);

		$.fn.fillProductos('producto'+(num-1));
	}
	
	/**
	 * Iniciliaza remito
	 */
	function initRemito() {
		
		// Borra todas las lineas de remito
		$('.remito-linea').remove();
		
		// Agregar la primer linea
		agregarLineaRemito(0);
	} 
	
	/**
	 * Remueve una linea de remito
	 */
	function removerLineaRemito(num) {
		
		$('#lineaRemito' + num).remove();
	}
	
	/**
	 * Carga todos los productos en los combos de productos
	 */
	function initProductCombos() {
		
		$.fn.fillProductos('producto0');
	}
	
	function initProductoTypeahead() {
		
		$('#descripcionProducto').typeahead({
			
			source: function (query, process) {
				
				return $.get('productos_getProductoList', { query: query }, function (data) {
					
					productos = []; map = {};
				 	var json = JSON.parse(data.lista);
				    $.each(json, function (i, producto) {
				        map[producto.descripcion] = producto;
				        productos.push(producto.descripcion);
				    });
				    process(productos);
				});
			},
			matcher: function (item) {
			    if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
			        return true;
			    }
			},
			sorter: function (items) {
			    return items.sort();
			},
			highlighter: function (item) {
			    var regex = new RegExp( '(' + this.query + ')', 'gi' );
			    return item.replace( regex, "<strong>$1</strong>" );
			},
			updater: function (item) {
			    selectedState = map[item].id;
				$('#productoId').val(map[item].id);
			    return item;
			}
		});
	}
</script>

<div class="page-header">
	<h1>
		Productos
		<br/>
		<small>Administraci&oacute;n de inventario y stock de productos</small>
	</h1>
</div>

<div>

	
	<!-- 
		Busqueda
	 -->
	<div class="well span11" style="margin-bottom:10px;padding-bottom:0px;">
		<form id="productoSearchForm" class="form-inline" style="margin-bottom:0px;padding-bottom:0px;">
			<div class="control-group">
				<input type="text" placeholder="Codigo ... " id="codigo" name="productoDTO.codigo" class="input-medium">
				<input type="text" placeholder="Marca ..." id="marca" name="productoDTO.marca" class="input-medium">
				<input type="text" placeholder="Descripcion ..." id="descripcion" name="productoDTO.descripcion" class="input-xlarge">
				<input type="text" placeholder="Proveedor ..." id="proveedor" name="productoDTO.proveedor"  class="input-medium">
				
				<a class="btn" id="searchButton"><i class="icon-search"></i></a>
			</div>
		</form>
	</div>
	
	
	<!-- 
		Opciones
	  -->
	<div class="option-container">
		<a class="btn" id="refreshListButton"><i class="icon-refresh"></i></a>
		<a class="btn" id="agregarRecepcionButton"><i class="icon-shopping-cart"></i></a>
		<a class="btn" id="importarProductoButton"><i class="icon-arrow-up"></i></a>
		<a class="btn" id="agregarButton"><i class="icon-plus"></i></a>
		<a class="btn" id="editButton"><i class="icon-edit"></i></a>
		<a class="btn" id="deleteButton"><i class="icon-trash"></i></a>
	</div>
	
	
	
	<!-- 
		Listado de productos 
	-->
	<form id="productoListForm">
	<table class="table table-hover span12" style="margin:0">
		<thead>
			<tr>
				<th></th>
				<th>C&oacute;digo</th>
				<th>Marca</th>
				<th>Modelo</th>
				<th>Medida</th>
				<th>Descripci&oacute;n</th>
				<th>Proveedor</th>
				<th>Precio f&aacute;brica</th>
				<th>Precio lista</th>
			</tr>
		</thead>
		<tbody id="listaProductos">
		</tbody>		
	</table>
	</form>
     
    
     <!--
    	 Agregar recepcion mercaderia 
      -->
    <div id="agregarRecepcion" class="modal hide agregarModalForm" tabindex="-1" role="dialog" aria-labelledby="agregarRecepcionLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel">Agregar recepci&oacute;n de mercader&iacute;a</h3>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 		
		   	<form id="recepcionForm" class="form-horizontal">
				<div class="row" style="margin-bottom:5px">
					<div class="span3">
						<span style="text-align:left;" for="remito">Remito Nro. </span>
						<input type="text" id="remito" name="remitoDTO.numero" class="input-small">
					</div>
					<div class="span3">
						<span style="text-align:left;">Almac&eacute;n </span>
					 	<select class="span2" name="remitoDTO.almacen">
					 		<option value="<%=Constants.ALMACEN_RODRIGUEZ%>"><%=Constants.ALMACEN_RODRIGUEZ%></option>
					 		<option value="<%=Constants.ALMACEN_LUJAN%>"><%=Constants.ALMACEN_LUJAN%></option>
					 	</select>
					 </div>
				</div>

				<div class="row" style="margin-bottom:5px; border-top:1px dotted #cccccc; border-bottom:1px dotted #cccccc; padding:2px">
					<div class="span1" style="text-align:center;font-weight:bold">Cantidad</div>
					<div class="span5" style="text-align:center;font-weight:bold">Producto</div>
				</div>
				<div id="remito-container">
				</div>
				<div>El producto no figura en el listado? <a id="remito-add-producto-button">Cargarlo desde aqu&iacute;</a></div>
    		</form>
       		<div class="modal-footer">
    			<button class="btn btn-primary" id="button-save-recepcion" data-loading-text="Enviando..." >Guardar</button>
    			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    		</div>
    	</div>
    </div>
    
    
    

    <!--
    	 Importacion masiva de productos
      -->
    <div id="importarProducto" class="modal hide importarModalForm" tabindex="-1" role="dialog" aria-labelledby="importarProductoLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel2">Importaci&oacute;n masiva de productos</h3>
    		<h5>Debe ingresar un producto por l&iacute;nea. Campos separados por ";"</h5>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 		
		   	<form id="importarProductoForm" class="form-horizontal">
				<div>
					<i>codigo; descripcion; marca; medida; modelo; precioB2B; precioLista; proveedor</i>
					<textarea id="importacion" name="importacion" style="width:850px; height:300px; font-size:16px"></textarea>
				</div>
		    </form>
   		</div>
   		
   		<div class="modal-footer">
    		<button class="btn btn-primary" id="button-import-producto" data-loading-text="Enviando..." >Importar</button>
    		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    	</div>
    </div>    
    
    
     
    <!--
    	 Agregar producto 
      -->
    <div id="agregarProducto" class="modal hide agregarModalForm" tabindex="-1" role="dialog" aria-labelledby="agregarProductoLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel2">Agregar producto</h3>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 		
		   	<form id="productoForm" class="form-horizontal">
				<div>
					<input type="hidden" id="id" name="productoDTO.id" />
					<input type="hidden" id="idStock" name="productoDTO.idStock" /> 
				
					<label class="control-label" for="codigo">C&oacute;digo</label>
					<div class="controls">
						<input type="text" id="codigo" name="productoDTO.codigo" class="input-large">
					</div>
					
					<!-- label class="control-label" for="tipo">Tipo</label>
					<div class="controls">
						<select id="tipo" name="productoDTO.tipo">
							<option value="1">Tipo 1</option>
							<option value="2">Tipo 2</option>
							<option value="3">Tipo 3</option>
							<option value="4">Tipo 4</option>
							<option value="5">Tipo 5</option>
						</select>
					</div-->

					<label class="control-label" for="marca">Marca</label>
					<div class="controls">
						<input type="text" id="marca" name="productoDTO.marca" class="input-large">
					</div>

					<label class="control-label" for="modelo">Modelo</label>
					<div class="controls">
						<input type="text" id="modelo" name="productoDTO.modelo" class="input-large">
					</div>
					
					<label class="control-label" for="medida">Medida</label>
					<div class="controls">
						<input type="text" id="medida" name="productoDTO.medida" class="input-large">
					</div>
					
					<label class="control-label" for="descripcion">Descripcion</label>
					<div class="controls">
						<input type="text" id="descripcion" name="productoDTO.descripcion" class="input-large">
					</div>	
					
					<label class="control-label" for="proveedor">Proveedor</label>
					<div class="controls">
						<input type="text" id="proveedor" name="productoDTO.proveedor" class="input-large">
					</div>	
					
					<label class="control-label" for="precioB2B">Precio f&aacute;brica</label>
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on">$</span>
							<input class="span2" id="precioB2B"  name="productoDTO.precioB2B" type="text">
						</div>
					</div>
					
					<label class="control-label" for="precioLista">Precio lista</label>
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on">$</span>
							<input class="span2" id="precioLista"  name="productoDTO.precioLista" type="text">
						</div>
					</div>
					
					<h3 style="margin-bottom:0">Asignar stock</h3>
					<hr style="margin-top:0"/>					
    				<table class="table table-striped stock-table">
						<tr>
							<td>
								<b>Cantidad:</b>
								<input class="span1" name="productoDTO.stocks[0].cantidad" id="stock_0_cantidad" type="text">
							</td>
							<td>
							<!-- 
								<input class="span2 uneditable-input" name="productoDTO.stocks[0].almacen" id="stock_0_almacen" type="text" readonly="readonly">
							 -->
							 	<select class="span2 almacen-selector" name="productoDTO.stocks[0].almacen" id="stock_0_almacen">
							 		<option value="<%=Constants.ALMACEN_RODRIGUEZ%>"><%=Constants.ALMACEN_RODRIGUEZ%></option>
							 		<option value="<%=Constants.ALMACEN_LUJAN%>"><%=Constants.ALMACEN_LUJAN%></option>
							 	</select>
							</td>
						</tr>
						<tr>
							<td>
								<b>Cantidad:</b>
								<input class="span1" name="productoDTO.stocks[1].cantidad" id="stock_1_cantidad" type="text" >
							</td>
							<td>
							<!-- 
								<input class="span2 uneditable-input" name="productoDTO.stocks[1].almacen" id="stock_1_almacen" type="text" readonly="readonly">
							-->
								<select class="span2 almacen-selector" name="productoDTO.stocks[1].almacen" id="stock_1_almacen">
							 		<option value="<%=Constants.ALMACEN_RODRIGUEZ%>"><%=Constants.ALMACEN_RODRIGUEZ%></option>
							 		<option value="<%=Constants.ALMACEN_LUJAN%>"><%=Constants.ALMACEN_LUJAN%></option>
							 	</select>
							</td>
						</tr>
				    </table>
				</div>
		    </form>
   		</div>
   		
   		<div class="modal-footer">
    		<button class="btn btn-primary" id="button-save-producto" data-loading-text="Enviando..." >Guardar</button>
    		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    	</div>
    </div>
    
    
    
</div>